<template>
	<el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
		<el-form ref="form" :model="form" :rules="rules">
			<el-form-item label="编码" :label-width="formLabelWidth" prop="code">
				<el-input v-model="form.code" autocomplete="off" placeholder="请输入配置编码，不可重复"></el-input>
			</el-form-item>
			<el-form-item label="邮箱SMTP地址" :label-width="formLabelWidth" prop="smtp">
				<el-input v-model="form.smtp" autocomplete="off" placeholder="请输入邮箱SMTP地址">
					<template #append>
						<el-popover v-model="smtpVisible" placement="bottom" width="560">
							<el-table :max-height="maxHeight" ref="singleTable" :data="smtpData" highlight-current-row @current-change="handleCurrentChange" style="width: 550px">
								<el-table-column type="index" width="50"></el-table-column>
								<el-table-column property="name" label="服务商" width="120"></el-table-column>
								<el-table-column property="smtp" label="SMTP地址" width="220"></el-table-column>
								<el-table-column property="port" label="端口"></el-table-column>
							</el-table>
							<div class="footer">
								<el-button type="danger" @click="closeSmtp">取消</el-button>
								<el-button type="success" @click="checkSmtp">确定</el-button>
							</div>
							<el-button slot="reference" icon="el-icon-search"></el-button>
						</el-popover>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="端口号" :label-width="formLabelWidth" prop="port">
				<el-input v-model="form.port" autocomplete="off" placeholder="请输入端口号"></el-input>
			</el-form-item>
			<el-form-item label="邮箱账号" :label-width="formLabelWidth" prop="mail">
				<el-input v-model="form.mail" autocomplete="off" placeholder="请输入邮箱账号"></el-input>
			</el-form-item>
			<el-form-item label="邮箱密码" :label-width="formLabelWidth" prop="password">
				<el-input v-model="form.password" autocomplete="off" placeholder="请输入邮箱密码" show-password></el-input>
			</el-form-item>
			<el-form-item label="邮箱昵称" :label-width="formLabelWidth" prop="nickName">
				<el-input v-model="form.nickName" autocomplete="off" placeholder="请输入邮箱昵称"></el-input>
			</el-form-item>
			<el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
				<el-input v-model="form.remark" autocomplete="off" placeholder="请输入备注"></el-input>
			</el-form-item>
			<el-form-item label="是否启用" :label-width="formLabelWidth" prop="status">
				<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="2"></el-switch>
				<span v-if="form.status == 1" style="margin-left: 17px; color: #13ce66">启用</span>
				<span v-if="form.status == 2" style="margin-left: 17px; color: #ff4949">禁用</span>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
			<el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
import { castleconfigmailInfo, castleconfigmailSave, castleconfigmailEdit } from "@/api/message/mail/castleconfigmail.js"
import { enumList } from "@/api/public.api.js"

export default {
	data() {
		return {
			visible: false,
			form: {
				code: "",
				smtp: "",
				port: "",
				mail: "",
				password: "",
				nickName: "",
				status: 1,
				remark: "",
			},
			formLabelWidth: "120px",
			rules: {
				code: [{ required: true, message: "请输入邮箱配置编码", trigger: "blur" }],
				smtp: [{ required: true, message: "请输入邮箱SMTP地址", trigger: "blur" }],
				port: [{ required: true, message: "请输入端口号", trigger: "blur" }],
				mail: [{ required: true, message: "请输入邮箱账号", trigger: "blur" }],
				password: [{ required: true, message: "请输入邮箱密码", trigger: "blur" }],
			},
			YesNoList: [],

			smtpVisible: false,
			smtpData: [
				{
					name: "QQ邮箱",
					smtp: "smtp.qq.com",
					port: "465/587",
				},
				{
					name: "163 邮箱",
					smtp: "smtp.163.com",
					port: "465/994",
				},
				{
					name: "腾讯企业邮箱",
					smtp: "smtp.exmail.qq.com",
					port: "465",
				},
				{
					name: "阿里企业邮箱",
					smtp: "smtp.qiye.aliyun.com",
					port: "465",
				},
			],
			smtpCurrent: {},
			maxHeight: window.innerHeight * 0.6,
		}
	},
	created() {},
	methods: {
		queryEnumList() {
			this.YesNoList = []
			enumList("YesNo", "").then(resp => {
				if (resp.code == 0) {
					this.YesNoList = resp.data
				}
			})
		},
		init(id) {
			this.resetForm()
			this.queryEnumList()
			//修改
			if (id) {
				castleconfigmailInfo(id).then(resp => {
					if (resp.code == 0) {
						this.$nextTick(() => {
							this.form = {
								...this.form,
								...resp.data,
							}
						})
					} else {
						this.$msg({
							message: resp.msg,
							type: "error",
						})
					}
				})
			}
			this.visible = true
		},
		//提交表单数据
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					//修改
					if (this.form.id) {
						castleconfigmailEdit(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
						//新增
					} else {
						castleconfigmailSave(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					}
				} else {
					console.log("error submit!!")
					return false
				}
			})
		},
		resetForm() {
			this.form = {
				code: "",
				smtp: "",
				port: "",
				mail: "",
				password: "",
				nickName: "",
				status: 1,
				remark: "",
			}
			this.$nextTick(() => {
				if (this.$refs["form"]) {
					this.$refs["form"].resetFields()
				}
			})
		},

		handleCurrentChange(e) {
			this.smtpCurrent = e
		},
		setCurrent(row) {
			this.$refs.singleTable.setCurrentRow(row)
		},
		closeSmtp() {
			this.smtpVisible = false
			this.setCurrent()
			this.smtpCurrent = {}
		},
		checkSmtp() {
			if (!this.smtpCurrent.smtp) {
				this.$message.error("请选择一行")
				return
			}
			this.form.smtp = this.smtpCurrent.smtp
			this.form.port = this.smtpCurrent.port
			this.closeSmtp()
		},
	},
}
</script>
<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
	height: auto;
	max-height: 274px;
	padding: 7px;
	overflow: hidden;
	overflow-y: auto;
	font-weight: normal;
}
.footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 15px;
}
</style>
